<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div>
			<h1>111111111111</h1>
			<h2>222222222222</h2>
			<h3>333333333333</h3>
			
		</div>
	</body>
</html>
<script type="text/javascript">
	var div = document.getElementsByTagName('div')[0]
	var h2 = document.getElementsByTagName('h2')[0]
	
	// 返回当前元素子节点
	console.log('返回当前元素子节点：' + div.children[0].nodeName) 
	
	//***************************************************
	
	
	
	
	// ***************************************   IE9 以下不支持
	// 获取当前元素父节点
	div.parentElement.style.backgroundColor = '#ccc'
	
	// 返回第一个子元素节点
	console.log('返回第一个子元素节点：' + div.firstElementChild.nodeName)
	
	// 返回最后一个子元素节点
	console.log('返回最后一个子元素节点：' + div.lastElementChild.nodeName)
	
	// 返回后一个兄弟元素节点
	console.log('返回后一个兄弟元素节点：' + h2.nextElementSibling.nodeName)
	
	// 返回前一个兄弟元素节点
	console.log('返回前一个兄弟元素节点：' + h2.previousElementSibling.nodeName)
	
	
	
	
	
	
</script>